<!-- 发布的文章内容详情页 -->
<template>
  <div id="post">
    <div class="container">
      <article-panel></article-panel>
      <article-area></article-area>
      <div class="sidebar">
        <author-block></author-block>
        <app-link></app-link>
        <wechat-banner></wechat-banner>
        <related-article></related-article>
        <article-catalog></article-catalog>
      </div>

    </div>

  </div>
</template>
<!-- https://blog.csdn.net/weixin_39327044/article/details/90545902 -->
<script>
import ArticleCatalog from './SideBar/ArticleCatalog.vue'
import ArticleArea from "./Article/ArticleArea.vue"
import ArticlePanel from './Article/ArticlePanel.vue';
import AuthorBlock from './SideBar/AuthorBlock.vue';
import AppLink from './SideBar/AppLink.vue';
import WechatBanner from './SideBar/WechatBanner.vue';
import RelatedArticle from './SideBar/RelatedArticle.vue';


export default {
  name: 'post',
  components: {
    ArticleArea,
    ArticleCatalog,
    ArticlePanel,
    AuthorBlock,
    AppLink,
    WechatBanner,
    RelatedArticle
  },
  data(){
    return{
      isRefresh:false,
    }
  },
  mounted() {
    if(!this.isRefresh){
      this.$forceUpdate()
      this.isRefresh=true;
    }
    //实现粘性目录盒子
    let catalogBox = document.querySelector('.article-catalog');
    let wechatBox = document.querySelector(".wechatBox");

    // 修复el-scroll
    document.querySelector('.el-scrollbar__wrap').style.overflowX = "hidden";


    const catalogTrack = () => {//锚点跟踪方法
      // console.log("滚动了");

      //粘性目录盒子
      if (!catalogBox.className.indexOf('sticky-block-box"') > -1 && (wechatBox.style.display == "none" && document.documentElement.scrollTop >= 806 ||
        wechatBox.style.display == "block" && document.documentElement.scrollTop >= 1075)) {
        catalogBox.setAttribute("class", "article-catalog sticky-block-box")
      } else {
        catalogBox.setAttribute("class", "article-catalog")
      }



      let currentHeading = document.querySelector('#heading-0');
      for (let heading_it of document.querySelectorAll("[id^='heading-']")) {//选中所有标题
        const heading = heading_it;
        //           console.log(heading.offsetTop);
        //           console.log(document.documentElement.scrollTop);
        if (heading.offsetTop - document.documentElement.scrollTop >= 60) {//滚下距离大于60则认为是当前访问的片段
          //             console.log(heading);
          break;
        }

        currentHeading = heading;//获取当前片段
      }

      //接下来从目录中选择对应的锚点
      const anchorName = currentHeading.getAttribute("id");
      const catalog = document.querySelector(`.catalog-item .item-content[anchor="${anchorName}"]`);//选择对应的目录项
      if (!catalog.className.indexOf('catalog-active') > -1) {//若没有设置为活跃类型
        if (document.querySelector('.catalog-active')) {
          document.querySelector('.catalog-active').setAttribute("class", "item-content");
        }
        catalog.setAttribute("class", "item-content catalog-active");
      }

    };
    catalogTrack();
    window.addEventListener("scroll", catalogTrack)
  }
}

</script>

<style>
/*导入css*/
@import "@/assets/css/base.css";

html {
  overflow-x: hidden;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  padding-top: 80px;
}

.sidebar {
  position: absolute;
  top: 80px;
  right: 0;
  width: 300px;
}
</style>
